<!DOCTYPE html>
<!-- 引入thymeleaf标签，指定前缀 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>返乡防疫登记</title>
    <link th:href="@{/css/style.css}" href="../static/css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="card" style="width: 60%">
        <h1 class="title">返乡防疫登记</h1>
        <form class="center" method="post" action="/save" th:action="@{/save}">
        <input type="hidden" name="id" th:value="${returnPerson.id}">
        <input type="hidden" name="interviewStatus" value="n">
        <table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td>姓名(*)</td>
                <td><label><input class="input" type="text" id="personName" name="personName" th:value="${returnPerson.personName}" /></label></td>
            </tr>
            <tr>
                <td>身份证(*)</td>
                <td><label><input class="input" type="text" id="personId" name="personId" th:value="${returnPerson.personId}" /></label></td>
            </tr>
            <tr>
                <td>电话(*)</td>
                <td><label><input class="input" type="text" id="personPhone" name="personPhone" th:value="${returnPerson.personPhone}" /></label></td>
            </tr>
            <tr>
                <td>出发城市(*)</td>
                <td><label><input class="input" type="text" id="sendCity" name="sendCity" th:value="${returnPerson.sendCity}" /></label></td>
            </tr>
            <tr>
                <td>返乡日期(*)</td>
                <td><label><input class="input" type="text" id="returnData" name="returnData" th:value="${#dates.format(returnPerson.returnData, 'yyyy-MM-dd')}" /></label></td>
            </tr>
            <tr>
                <td>详细住址(*)</td>
                <td><label><input class="input" type="text" id="address" name="address" th:value="${returnPerson.address}" /></label></td>
            </tr>
            <tr th:if="${returnPerson.id != null}">
                <td>是否访谈(*)</td>
                <td>
                    <label>
                        <select class="input select" id="interviewStatus" name="interviewStatus">
                            <option value="n">否</option>
                            <option value="y">是</option>
                        </select>
                    </label>
                </td>
            </tr>
            <tr>
                <td class="center" colspan="2">
                    <button class="button green" type="submit">保存</button>
                    <button class="button gray" type="button" onclick="clearForm();">清空</button>
                </td>
            </tr>
        </table>
        </form>
    </div>
</body>

<script type="text/javascript" th:src="@{/js/jquery-3.7.0.min.js}"></script>

<script th:inline="javascript">
    function clearForm() {
        var form = document.querySelector('form');
        form.reset();
    }

    function validateForm() {
        var personName = document.getElementById("personName").value;
        var personId = document.getElementById("personId").value;
        var personPhone = document.getElementById("personPhone").value;
        var sendCity = document.getElementById("sendCity").value;
        var returnData = document.getElementById("returnData").value;
        var address = document.getElementById("address").value;

        if (personName === "" || personId === "" || personPhone === "" || sendCity === "" || returnData === "" || address === "") {
            alert("所有字段都是必填项，请填写完整后再提交！");
            return false;
        }
        return true;
    }

</script>
</html>